<template>
  <div class="photo-supplement">
    <div class="tree-box">
      <CustomTree title="请选择" :data="treeData" @leafNodeClick="getNodeData" selectFirstNode></CustomTree>
    </div>
    <div class="table-box" v-loading="tableLoading">
      <!-- 未审批 -->
      <CustomTable v-if="reqParams.spjg == 'W'" ref="tableRef" height="965rem" type="index" lastColMinWidth="20%" :tableHeader="tableHeader" api="/znjszd3/ht/sjbl/getZpblList" :params="reqParams">
        <template #zpurl="{ row }">
          <PhotoScale :src="row.zpurl + '&token=' + userStore.token" />
        </template>
        <template #blzpurl="{ row }">
          <PhotoScale :src="row.blzpurl" />
        </template>

        <template #lastColumn="{ row }">
          <el-button type="primary" plain @click.stop="isAgree(row)"><i class="iconfont icon-shenpi"></i>审批</el-button>
        </template>
      </CustomTable>
      <!-- 已审批 -->
      <CustomTable v-else ref="tableRef2" height="965rem" type="index" :tableHeader="tableHeader2" api="/znjszd3/ht/sjbl/getZpblList" :params="reqParams">
        <template #zpurl="{ row }">
          <PhotoScale :src="row.zpurl + '&token=' + userStore.token" />
        </template>
        <template #blzpurl="{ row }">
          <PhotoScale :src="row.blzpurl" />
        </template>
        <template #spjg="{ row }">
          <span v-if="row.spjg == '审批通过'" style="color: #67c23a">{{ row.spjg }}</span>
          <span v-else style="color: red">{{ row.spjg }}</span>
        </template>
      </CustomTable>
      <CustomDialog title="照片补录审批" v-model:dialogVisible="dialogVisible" width="20%" height="260rem" top="20vh" @confirm="confirm">
        <CustomForm ref="formRef" :editable="true" v-model:form="form" columns="1"> </CustomForm>
      </CustomDialog>
    </div>
  </div>
</template>

<script setup name="photoSupplement">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
import { http } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { stores } from '@/stores/index.js'
const userStore = stores.useUserStore()
const props = defineProps({})
const tableRef = ref()
const tableRef2 = ref()
const tableLoading = ref(false)
const dialogVisible = ref(false)
const row = ref({})
const form = ref({
  spjg: 'Y'
})

const treeData = ref([
  {
    zddm: 'W',
    zdzw: '未审批'
  },
  {
    zddm: 'Y',
    zdzw: '已审批'
  }
])
const tableHeader = ref([
  {
    key: 'xm',
    label: '姓名',
    width: '20%'
  },
  {
    key: 'bljszw',
    label: '监室号',
    width: '20%'
  },
  {
    key: 'zpurl',
    label: '入所照片',
    width: '20%'
  },
  {
    key: 'blzpurl',
    label: '补录照片',
    width: '20%'
  },
  {
    key: 'jbsj',
    label: '提交时间',
    width: '20%'
  }
])
//已审批
const tableHeader2 = ref([
  {
    key: 'xm',
    label: '姓名',
    width: '20%'
  },
  {
    key: 'bljszw',
    label: '监室号',
    width: '20%'
  },
  {
    key: 'zpurl',
    label: '入所照片',
    width: '20%'
  },
  {
    key: 'blzpurl',
    label: '补录照片',
    width: '20%'
  },
  {
    key: 'jbsj',
    label: '提交时间',
    width: '20%'
  },
  {
    key: 'spsj',
    label: '审批时间',
    width: '20%'
  },
  {
    key: 'spjg',
    label: '审批结果',
    width: '20%'
  }
])
const reqParams = ref({
  spjg: 'W'
})

const confirm = (params) => {
  http('/znjszd3/ht/sjbl/updateBlzpById', 'post', Object.assign({ id: row.value.id }, params), false).then((res) => {
    if (res.status == 200) {
      ElMessage.success(res.message[0])
      if (reqParams.value.spjg == 'W') {
        tableRef.value.getData()
      } else if (reqParams.value.spjg == 'Y') {
        tableRef2.value.getData()
      }
    }
  })
}
const getNodeData = (node) => {
  reqParams.value.spjg = node.zddm
}
const isAgree = (item) => {
  dialogVisible.value = true
  row.value = item
}
</script>
<style lang="scss" scoped>
.photo-supplement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  .table-box {
    margin: 10px;
    width: calc(100% - 200px);
    .photo {
      margin-top: 6px;
      width: 25px;
      max-height: 45px;
    }
  }
  ::v-deep(.custom-form) {
    .el-form,
    .el-form-item {
      border: none;
    }
    .el-form {
      margin: 20px;
    }
    .el-form-item.spjg {
      .el-form-item__label {
        display: none;
      }
      .el-radio-group {
        justify-content: center;
        .el-radio:nth-child(1) {
          margin-right: 80px;
        }
      }
      .el-radio__label {
        font-size: 18px;
      }
      .el-radio__inner {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
